<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web-speech-try</title>
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body class="bg-dark text-white">
    <div class="container text-center">
      <img src="" alt="" class="mb-5" />
      <div class="row">
        <div class="col-md-6 mx-auto">
          <form>
            <!-- text -->
            <div class="form-group">
              <textarea name="text" id="text-input" class="form-control form-control-lg" placeholder="Type anything...">
这是一个web tts 小项目</textarea
              >
            </div>
            <!-- rate 倍数-->
            <div class="form-group">
              <label for="rate">语速</label>
              <div id="rate-value" class="badge badge-primary float-right">1</div>
              <input type="range" id="rate" class="custom-range" min="0.5" max="2" value="1" step="0.1" />
            </div>
            <!-- pitch 音高-->
            <div class="form-group">
              <label for="pitch">音高</label>
              <div id="pitch-value" class="badge badge-primary float-right">1</div>
              <input type="range" id="pitch" class="custom-range" min="0" max="2" value="1" step="0.1" />
            </div>

            <!-- select voice 选择语种和配音人员 -->
            <div class="form-group">
              <select class="form-control form-control-lg mb-3" id="voice-select"></select>
              <button class="btn btn-light btn-lg btn-block">Speak It</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- footer -->

    <footer class="text-center position-relative mt-5">
      <div text-opacity-50="" text-gray="" text-sm="">
        <div row="" gap1="" justify-center="">
          Built with <a href="https://www.w3.org/" target="_blank" text-gray="" text-opacity-100="">W3C</a> · Deploys on
          <a
            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API"
            target="_blank"
            text-gray=""
            text-opacity-100=""
            >Web Speech API</a
          >
        </div>
        <div>MIT Licensed | Copyright © <a href="https://github.com/akex4396">凌天akex</a></div>
      </div>
    </footer>
    <script src="./js/app.js"></script>
  </body>
</html>
